<template>
  <div class="dj">
    <DjBanner></DjBanner>
    <DjCateList :djCatelist="djCatelist"></DjCateList>
    <DjPay></DjPay>
    <PersonalizeRecommend></PersonalizeRecommend>
    <DjType :type='ids[0]' :name='names[0]'></DjType>
    <DjType :type='ids[1]' :name='names[1]'></DjType>
    <DjType :type='ids[3]' :name='names[3]'></DjType>
    <DjType :type='ids[2]' :name='names[2]'></DjType>
    <DjType :type='ids[4]' :name='names[4]'></DjType>
  </div>
</template>

<script>
import { getDjCateList } from '../../../network/dj.js'
import DjBanner from './DjBanner.vue'
import DjCateList from './DjCateList.vue'
import PersonalizeRecommend from './PersonalizeRecommend.vue'
import DjType from './DjType.vue'
import DjPay from './DjPay.vue'
export default {
  components: {
    DjBanner,
    DjCateList,
    PersonalizeRecommend,
    DjType,
    DjPay
  },
  data () {
    return {
      ids: [],
      names: [],
      djCatelist: []
    }
  },
  methods: {
    getDjCateList () {
      getDjCateList().then(res => {
        // console.log(res.data)
        res.data.categories.slice(0, 5).forEach(item => {
          this.ids.push(item.id)
          this.names.push(item.name)
        })
        this.djCatelist = res.data.categories.slice(0, 5)
        // console.log(this.djCatelist)
        // console.log(this.ids)
      })
    }
  },
  created () {
    this.getDjCateList()
  }
}
</script>

<style lang="less" scoped>
  .dj {
    width: 100%;
  }
</style>
